<template>
  <div>
    <div class="topWrapper">
      <div class="logo">
        <img
          alt="湘财证券"
          src="@/assets/images/logo.png"
        >
      </div>
      <div class="tab">
        <div class="eachTab">
          指南
        </div>
        <div class="eachTab">
          组件
        </div>
        <div class="eachTab">
          主题
        </div>
        <div class="eachTab">
          资源
        </div>
        <div class="eachTab">
          文档
        </div>
      </div>
    </div>
    <div class="desc">
      <h2>网站快速成型工具</h2>
      <div class="detext">
        xc-design-ui，一套为开发者、设计师和产品经理准备的前端组件库
      </div>
      <div class="detail">
        「快乐工作」助力设计开发者「更灵活」地搭建出「更美」的产品 ～
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  beforeCreate: function () {},
  created: function () {},
  mounted: function () {}
}
</script>

<style lang="less" scoped>
.topWrapper {
  height: 6.4rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .logo {
    margin-left: 2rem;
    img {
      width: 4.8rem;
      height: 4.8rem;
    }
  }
  .tab {
    width: 60rem;
    margin-right: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .eachTab {
      font-size: 1.2rem;
      color: #333;
    }
  }
}
.desc {
  padding-top: 5rem;
  h2 {
    text-align: center;
    font-size: 3.2rem;
    margin: 0;
    line-height: 4.8rem;
    color: #555;
  }
  .detext {
    text-align: center;
    font-size: 1.8rem;
    line-height: 2.8rem;
    color: #888;
    margin: 1rem 0 0.5rem;
  }
  .detail {
    text-align: center;
    font-size: 1.6rem;
    color: #999;
  }
}
.text {
  font-size: 14px;
  color: green;
  // background-color: black;
}
</style>
